<template>
  <div>
    <div class="row">
      <div class="col-4 mb-4" v-for="colmun in colmunList" :key="colmun._id">
        <div class="card h-100 shadow-sm" style="width: 18rem">   
          <div class="card-body text-center">
            <img :src="colmun.avatar && colmun.avatar.url" class="rounded-circle border border-light w-25 my-3" alt="..." />
            <h5 class="card-title">{{ colmun.title }}</h5>
            <p class="card-text">{{ colmun.description }}</p>
            <router-link :to="`/colmun/${colmun._id}`" class="btn btn-primary">进入专栏</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { ColmunProps } from "@/store";

declare var require: any;
export default defineComponent({
  name: "ColmunList",
  props: {
    list: {
      //PropType用于在用运行时 props 声明时给一个 prop 标注更复杂的类型定义
      type: Array as PropType<ColmunProps[]>, //as 类型语言
      required: true,//必须填写
    },
  },
  setup(props) {
    const colmunList = computed(() => {
      return props.list.map((colmun) => {
        if (!colmun.avatar) {
          colmun.avatar = {
            url: require("@/assets/logo.png")
          }
        }
        return colmun;
      });
    });
    return {
      colmunList,
    };
  },
});
</script>
